<template>
  <div>
    <div style="margin-top: 15px;">
      <el-button size="mini" :type="status==0?'primary':''" round @click="statusQuery(0)">全部</el-button>
      <el-button size="mini" :type="status==40?'primary':''" round @click="statusQuery(40)">未推送</el-button>
      <el-button size="mini" :type="status==41?'primary':''" round @click="statusQuery(41)">进行中</el-button>
      <el-button size="mini" :type="status==42?'primary':''" round @click="statusQuery(42)">已推送</el-button>
    </div>
    <el-table :data="tableDataList" style="width: 100%;margin-top: 15px;" height="500" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
      <template slot="empty">
        <p>暂无跑马灯</p>
      </template>
      <el-table-column prop="id" align="center" label="序号" min-width="10%">
      </el-table-column>
      <el-table-column prop="content" :show-overflow-tooltip="true" align="center" label="跑马灯消息" min-width="70%">
      </el-table-column>
      <el-table-column prop="statusVal" :show-overflow-tooltip="true" align="center" label="状态" min-width="10%">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="10%">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==40" type="text" size="mini" @click="pushScreen(scope.row)">推送</el-button>
          <el-button v-if="scope.row.status==40" type="text" size="mini" @click="deleteLanternInfo(scope.row)">删除</el-button>
          <el-button v-if="scope.row.status==41 && scope.row.downTime>0" type="text" size="mini" disabled>{{scope.row.downTime}}s</el-button>
          <el-button v-if="scope.row.status==42 && scope.row.downTime<=0" type="text" size="mini" @click="pushScreen(scope.row)">推送</el-button>
          <el-button v-if="scope.row.status==42 && scope.row.downTime<=0" type="text" size="mini" @click="deleteLanternInfo(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 15px;text-align: right;">
      <el-pagination
        layout="total, prev, pager, next, jumper,sizes"
        @current-change="refreshPageRequest"
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="totalSize"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
    <el-dialog
      title="新增跑马灯"
      :visible.sync="dialogVisible"
      width="40%"
      append-to-body>
      <el-row v-loading="editLoading">
        <el-form label-width="130px" size="mini" ref="dataForm" :rules="addRules" :model="dataForm">
          <el-col :span="24">
            <el-form-item label="跑马灯内容："prop="content">
              <el-input maxlength="100" placeholder="最多可编辑100个字"  v-model="dataForm.content" ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="24">
          <div style="text-align: center;">
            <el-button size="mini" @click="cancel">取消</el-button>
            <el-button size="mini" type="primary" @click="dataFormSubmit">确定</el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "liveControllerMarqueeManage",
    components: {
    },
    props:{
      data:{
        type: Object,
        default:()=>{}
      }
    },
    data() {
      return {
        timer:null,
        status:0,
        editLoading:0,
        findDataForm:{},
        parentData:{},
        dialogVisible: false,
        headerCellStyle:{
          'background-color': '#f1f1f1',
          'font-size':'12px',
          'color':'#000000'
        },
        cellStyle:{
          'font-size':'12px'
        },
        dataForm:{},
        tableDataList:[],
        pageRequest:{
          pageNum:1,
          pageSize:10
        },
        totalSize:10,
        addRules : {
          content: [
            { required: true, message: '跑马灯名称不能为空', trigger: 'blur' },
          ],
        },
      }
    },
    mounted: function () {
      this.parentData = this.data;
      this.findPage();
      this.init();
    },
    destroyed(){ // 页面销毁
      this.clearTimer()
    },
    methods: {
      clearTimer(){ // 清除定时器
        clearInterval(this.timer)
      },
      init() {
        let i=0;
        this.timer = setInterval(() => {
          this.tableDataList.forEach((item,idx) => {
            if(item.status==41 && item.downTime>0){
              item.downTime = item.downTime - 1 <= 0 ? 0 : item.downTime - 1;
            }
          })
          this.tableDataList.forEach((item,idx) => {
            if(item.status==41 && item.downTime<=0){
              this.findPage();
            }
          })
          i++;
        },1000)
      },
      /*新增提交*/
      dataFormSubmit: function() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              this.editLoading = true;
              this.dataForm.liveId=this.parentData.id;
              this.dataForm.status=40;
              this.dataForm.isTop=0;
              this.utils.request.liveRequest({
                url: '/api/v1/liveLanternInfo/saveLiveLanternInfo',
                method: 'post',
                params: this.dataForm
              }).then(result => {
                let data = result.data;
                if (data && data.code === '0') {
                  this.$refs.dataForm.resetFields();
                  this.findPage();
                  this.$forceUpdate();
                }
                this.editLoading=false;
              });
              this.dialogVisible = false;
            })
          }
        });
      },
      findPage(){
        let this_=this;
        if (this_.findDataForm == undefined || this_.findDataForm == null) {
          this_.findDataForm = {};
        }
        this_.findDataForm.pageNum= this.pageRequest.pageNum;
        this_.findDataForm.pageSize= this.pageRequest.pageSize;
        this_.findDataForm.liveId=this_.parentData.id;
        this.utils.request.liveRequest({
          url: '/api/v1/liveLanternInfo/getLiveLanternInfoList',
          method: 'get',
          params: this_.findDataForm
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this_.tableDataList = data.data.rows;
            this.totalSize = data.data.total;
            this_.$forceUpdate();
          } else {
            this_.tableDataList = []
            this_.totalPage = 0
          }
          this_.dataListLoading = false
        });
      },
      reset(){
        this.dataForm = {}
      },
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
        this.findPage();
      },
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      cancel(){ // 取消
        this.$refs.dataForm.resetFields();
        this.dialogVisible = false;
        this.findPage();
      },
      statusQuery(val){
        if(val!=0){
          this.findDataForm.status=val;
          this.status=val;
        }else{
          this.findDataForm=null;
          this.status=0;
        }
        this.findPage();
      },
      pushScreen(row){ // 推屏
        this.utils.request.liveRequest({
          url: '/api/v1/liveLanternInfo/pushLiveLanternInfo',
          method: 'post',
          params: row
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.$emit("pushScreen",row)
            this.findPage();
            this.$message({message: "操作成功", type: "info"});
          }
        });
      },
      offPushScreen(row){
        this.utils.request.liveRequest({
          url: '/api/v1/liveLanternInfo/offPushLiveLanternInfo',
          method: 'post',
          params: row
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.$emit("pushScreen",row)
            this.findPage();
            this.$message({message: "操作成功", type: "info"});
          }
        });
      },
      deleteLanternInfo(row){ //删除
        this.editLoading=true
        let id = row.id;
        this.$confirm("确定删除吗", "提示", {type:'warning'}).then(() => {
          this.utils.request.liveRequest({
            url: '/api/v1/liveLanternInfo/delete',
            method: 'post',
            params: id
          }).then(result => {
            let data = result.data;
            if (data && data.code === '0') {
              this.dialogVisible = false
              this.$message.success("删除成功");
              this.findPage();
            } else{
              this.$message.error("删除失败");
            }
            this.editLoading=false;
          })
        })
      },
    }
  }
</script>
<style scoped lang="scss">

</style>
